<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>欢迎进入</title>
        <style>
          .nav a:hover{                  /*放上去有颜色变化*/
            background-color:#eee;
            color:orange;
          }
          .nav ul li{
            display: inline-block;      /*导航栏变成横向*/
            height: 41px;
            padding: 0 80px;
            font-size: 12px;
            color: darkturquoise;
          }
         .nav{          /* 导航栏加背景色，调整与页顶的距离*/
          height: 41px;
          border-top: 3px solid color black;
          border-bottom: 1px solid color wheat;
          background-color: beige;
          line-height: 41px;
        }
        .nav ul{        /*清除<ul>下包含的点*/
          list-style: none;
        }
      .v{                   
			float: left;
			line-height: 100px;
			color: blue;
			font-size: 30px;
		    }
			.c{
				float: right;
				color:red;
				line-height: 100px;
				margin-right: 40px;
				font-weight: bold;
				font-size: 18px;
			}
          .box{
            width: 500px;
            float: left;            
            margin:100px auto; 
          }     
          .box1{ 
            float: right;
            width: 500px;
            height: 220px;
            margin: 100px auto;
          }      
      .box img{                  
        width: 150px;
        height: 200px;
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0,.3);  
      }
      .box1 img{
        width: 150px;            
        height: 200px;
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0,.3); 
      } 
      .color{
        background-color: cadetblue;
        text-decoration-color: aquamarine;
      } 
      .color1{
        background-color: coral;
      }
        </style>
    </head>
    <body background="R-C.jpg">
      <header>
        <div class="v">阿斌工作室</div>
        <div class="c">嘟嘟 666-10086 </div>
        <div class="nav">
        <ul>
          <li><a href="https://lpl.qq.com/" style="text-decoration:none;">关于我们</a></li>
          <li><a href="https://www.icourse163.org/" style="text-decoration:none;">我们的资料</a></li>
          <li><a href="https://www.taobao.com/" style="text-decoration:none;">我们的产品</a></li>
          <li><a href="https://www.jiayuan.com/" style="text-decoration:none;">联系我们</a></li>
          <li><a href="https://v.qq.com/channel/choice?channel_2022=1" style="text-decoration:none;">休闲时间</a></li>
        </ul>
      </div>
      </header>
      <main>
         <div class="box">       
             <div ><img src="微信图片_20221124194445.jpg"></div>
                <p> 最满意的照片</p>  
              <div><img src="微信图片_20221125171348.jpg"></div>
                <p> 江财夜景</p>
              </div>  
              <div class="box1">    
                <div><img src="微信图片_20221125171403.jpg"></div>
                  <p>美好时光</p>
                <div><img src="微信图片_20221125171409.jpg"></div>
                  <p>融创记忆</p>
              </div>
        <div>
        <table border="1">
          <tr class="color" >
               <td>吃饭</td>
               <td>学习</td>
               </tr>
          <tr class="color1">
               <td>玩游戏</td>
               <td>睡觉</td>
          </tr>
        </table>
        </div>
      </main>
      <footer>
        <h1>作业</h1>
      </footer>
    </body>
</html>